<html>
<head>
<title>yanagishima | Web UI for Presto and Hive</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" id="favicon">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="description" content="Web UI for Presto and Hive">
<style>
* {
	 font-family: "Droid Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
	 text-align: center;
}
body {
	margin: 0;
	padding: 0;
}
main {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: auto;
	height: auto;
	color: #fff;
}
video { 
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
	transition: 1s opacity;
	filter: grayscale(100%) brightness(0.3) blur(5px);
	background: url(http://i.ytimg.com/vi/SoneFYNCXJE/maxresdefault.jpg) 50% no-repeat;
	background-size: contain;
}
h1 {
	margin: 0;
}
p {
	text-align: right;
	font-size: 96%;
}
iframe {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 64%;
	height: 64%;
	transform: translateX(-50%) translateY(-50%);
}
#logo {
	width:  240px;
}
#wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	min-width: 960px;
}
</style>
</head>
<body>
<main>
<p>Web UI for Presto and Hive</p>
<h1><a href="https://github.com/yanagishima/yanagishima"><img src="yanagishima.svg" alt="yanagishima" id="logo"></a></h1>
</main>
<iframe src="https://www.youtube.com/embed/SoneFYNCXJE" frameborder="0" allowfullscreen></iframe>
<video src="yanagishima9.mp4" playsinline autoplay muted loop>
</video>
</body>
</html>